<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>修改个人信息</title>
</head>
<body>
<h2>修改个人信息</h2>
<p>当前用户：<span th:text="${userName}"></span></p>

<form id="update-form">
  <input type="hidden" id="userId" name="userId" th:value="${userId}">
  <p>新用户名: <input type="text" id="userName" name="userName" th:value="${userName}"></p>
  <p>新邮箱: <input type="email" id="email" name="email"></p>
  <p>新密码: <input type="password" id="password" name="password"></p>
  <p><button type="button" id="save-changes-btn">保存修改</button></p></form>

<br/>
<a href="/success">返回首页</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#save-changes-btn').click(function() {

      const updateData = {
        userId: $('#userId').val(), // 从隐藏字段中获取用户ID
        userName: $('#userName').val(),
        email: $('#email').val(),
        password: $('#password').val()
      };

      $.ajax({
        url: '/user/update-info',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(updateData),
        success: function(response) {
          alert('信息修改成功！');
          window.location.href = '/success';
        },
        error: function() {
          alert('信息修改失败，请重试！');
        }
      });
    });
  });
</script>
</body>
</html>